<script setup>

// 从 Vue 3 库中导入 reactive 函数。reactive 是 Vue 3 中用于创建响应式对象的核心函数之一，
// 它可以将一个普通的 JavaScript 对象转换为响应式对象，使得对象的属性变化能够被 Vue 检测到，并自动更新与之绑定的 DOM 元素
import { reactive } from 'vue'

// reactive 函数接收一个普通的 JavaScript 对象 { count: 0 } 作为参数，
// 这个对象有一个属性 count，其初始值为 0
const state = reactive({ count: 0 })
</script>

<template>
<!-- @click 是 Vue 的事件绑定指令，@ 是 v-on 的缩写，用于监听 DOM 事件，这里监听的是按钮的点击事件。 -->
<!-- state.count++ 是一个 JavaScript 表达式，表示当按钮被点击时，将 state 对象的 count 属性的值加 1。由于 state 是响应式对象，Vue 会检测到 count 属性的变化，并自动更新与 state.count 绑定的 DOM 元素。-->
<button @click="state.count++">
  <!-- Vue 的插值表达式，双大括号 {{ }} 用于将 JavaScript 表达式的值渲染到 DOM 中。这里会将 state.count 的当前值显示在按钮上。当 state.count 的值发生变化时，按钮上显示的数字也会相应更新 -->
  {{ state.count }}
</button>
</template>
